<!-- 表情弹出框 -->
<style>
.emoji-mart-scroll {
  padding: 0 !important;
}
.emoji-mart-bar {
  display: none !important;
}
.emoji-mart-category {
  background-color: #fff !important;
}
</style>
<style lang="less" scoped>
@import "~@/theme/index.less";
.emojiPopover {
  position: fixed;
  bottom: 59 * @hd;
  left: 0;
  right: 0;

  .emojiBack {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    background-color: #ccc;
  }
}
.emoji-mart {
  border: 0 !important;
  width: 100% !important;
  height: 270 * @hd !important;
}

.fade-enter-active {    //类名：隐藏到显示过程所需要的时间
 animation: bounce-in .3s;
}
.fade-leave-active {    //类名：显示到隐藏过程所需要的时间
 animation: bounce-in .3s reverse;   //reverse表示和隐藏到显示动画相反
}
@keyframes bounce-in {
 0% {
  opacity: .3;
 }
 50% {
  opacity: .6;
 }
 100% {
  opacity: 1;
 }
}
</style>
<template>
  <transition name="fade">
    <div
      ref="emoji"
      v-show="showEmoji"
      class="emojiPopover"
    >
      <div
        @tap="closeBg"
        class="emojiBack"
      />
      <picker
        @select="selectEmoji"
        :sheet-size="16"
        :i18n="pickerI18n"
        :include="['recent','people']"
        :showPreview="false"
        :showSearch="false"
        :showSkinTones="false"
        :native="true"
        set="apple"
        emoji="point_up"
      />
      <slot name="button" />
    </div>
  </transition>
</template>
<script>
import { Picker } from 'emoji-mart-vue';

export default {
  name: 'JeEmojiPopover',
  components: { Picker },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      pickerI18n: {
        search: '搜索',
        notfound: '没有找到表情',
        categories: {
          search: '搜索结果',
          recent: '常用',
          people: '表情符号和人物',
          nature: '动物与自然',
          foods: '食物与饮料',
          activity: '活动',
          places: '旅行与地点',
          objects: '物体',
          symbols: '符号',
          flags: '旗帜',
          custom: '自定义',
        },
      },
      showEmoji: false,
    };
  },
  watch: {
    show(nv) {
      if (nv) {
        if (mui.os.android) {
          setTimeout(() => {
            this.$refs.emoji.style.bottom = '0';
            this.showEmoji = nv;
          }, 300);
        } else if (mui.os.ios) {
          setTimeout(() => {
            this.$refs.emoji.style.bottom = '0';
            this.showEmoji = nv;
          }, 500);
        }
      } else {
        this.$refs.emoji.style.bottom = '-270px';
        this.showEmoji = nv;
      }
    },
  },
  methods: {
    selectEmoji(emoji) {
      this.$emit('select', emoji.native);
      // mui('#popover').popover('toggle');
    },
    closeBg() {
      this.showEmoji = false;
      this.$emit('closeEmoji');
    },
  },
};
</script>
